.b-expandable > div {
	display: flex;
	align-items: flex-start;
}

.b-expandable > div .b-text {
	position: relative;
	width: 100%;
}

.b-expandable > div .b-img {
	width: var(--b-width);
	flex-shrink: 0;
	margin-left: 1rem;
}

.b-expandable > div .b-img img{
	width: 100%;
}

.b-expandable .b-expand-button {
	display: none;
}

@media only screen and (max-width: 1024px) {
	
	.b-expandable {
		box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);
		padding: 1rem;
	}
	
	.b-expandable > div .b-text {
		overflow: hidden;
		height: calc(var(--b-expand-height) * var(--b-collapse-scale));
		transition: height 0.5s;
	}
	
	.b-expandable > div .b-text.b-expand {
		height: var(--b-expand-height);
	}
	
	.b-expandable > div .b-text::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		bottom: 0;
		background: linear-gradient(180deg, #ffffff00 25%, #ffffffff 100%);
		transition: bottom 0.5s;
	}
	
	.b-expandable > div .b-text.b-expand::after {
		bottom: -100%;
	}
	
	.b-expandable > div .b-img {
		width: 100%;
		margin-left: 0;
		margin-bottom: 1rem;
	}
	
	.b-expandable > div {
		flex-direction: column-reverse;
	}
	
	.b-expandable .b-expand-button {
		display: inline-block;
		width: fit-content;
		padding: 0.5rem;
		margin-top: 1rem;
		color: white;
		background-color: var(--b-4eg-blue-1);
		cursor: pointer;
	}
}